<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>Hello world!</title>
    <!-- zui -->
    <link href="../Resources/plugins/zui/css/zui.min.css" rel="stylesheet">
    <link href="../Resources/plugins/zui/lib/datatable/zui.datatable.min.css" rel="stylesheet">
    <!-- 分页 -->
    <link href="../Resources/plugins/page/css/jquery.page.css" rel="stylesheet">
    
    <!-- font-awesome -->
	<link rel="stylesheet" type="text/css" href="../Resources/plugins/grid/dependents/fontAwesome/css/font-awesome.min.css" media="all" />
	
	<!-- datePicker -->
	<link rel="stylesheet" type="text/css" href="../Resources/plugins/grid/dependents/datePicker/skin/WdatePicker.css" />
	<link rel="stylesheet" type="text/css" href="../Resources/plugins/grid/dependents/datePicker/skin/default/datepicker.css" />
	
	<!-- DLShouWen Grid -->
	<link rel="stylesheet" type="text/css" href="../Resources/plugins/grid/dlshouwen.grid.min.css" />

	<!-- icon css -->
	<link rel="stylesheet" type="text/css" href="../Resources/plugins/grid/doc/css/icons.css" />
	
	<!-- toTop -->
	<link rel="stylesheet" type="text/css" href="../Resources/plugins/toTop/jquery.toTop.css" />	
    
    <!-- syntaxHighLighter 代码高亮-->
	<link rel="stylesheet" type="text/css" href="../Resources/plugins/syntaxHighLighter/styles/shCore.css" />
	<link rel="stylesheet" type="text/css" href="../Resources/plugins/syntaxHighLighter/styles/shThemeDefault.css" />
    
    <style type="text/css">
		#wechat{position:fixed;bottom:10px;right:10px;z-index:1000;}
	</style>
	
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
	  <script src="../Resources/plugins/zui/lib/ieonly/html5shiv.js"></script>
	  <script src="../Resources/plugins/zui/lib/ieonly/respond.js"></script>
	  <script src="../Resources/plugins/zui/lib/ieonly/json2.js"></script>
	<![endif]-->
	
  </head>
  <body>
  	<!--[if lt IE 8]>
    <div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div>
  	<![endif]-->
    
  	<header id="header" class="bg-primary">
	  	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		  <div class="container">
		    <!-- 导航头部 -->
		    <div class="navbar-header">
		      <!-- 移动设备上的导航切换按钮 -->
		      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
		        <span class="sr-only">切换导航</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <!-- 品牌名称或logo -->
		      <a class="navbar-brand" href="#">ZUI</a>
		    </div>
		    <!-- 导航项目 -->
		    <div class="collapse navbar-collapse navbar-collapse-example">
		      <!-- 一般导航项目 -->
		      <ul class="nav navbar-nav ">
		        <li class="active"><a href="your/nice/url">项目</a></li>
		        <li><a href="your/nice/url">需求</a></li>
		        <!-- 导航中的下拉菜单 -->
		        <li class="dropdown">
		          <a href="your/nice/url" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a>
		          <ul class="dropdown-menu" role="menu">
		            <li><a href="your/nice/url">任务</a></li>
		          </ul>
		        </li>
		      </ul>
		      
		      <!-- 导航中的表单 -->
		      <form class="navbar-form navbar-left" role="search">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="搜索">
		        </div>
		        <button type="submit" class="btn btn-default">搜索</button>
		      </form>
		      
		      <!-- 右侧的导航项目 -->
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="your/nice/url">帮助</a></li>
		        <li class="dropdown">
		          <a href="your/nice/url" class="dropdown-toggle" data-toggle="dropdown">探索 <b class="caret"></b></a>
		          <ul class="dropdown-menu" role="menu">
		            <li><a href="your/nice/url">敏捷开发</a></li>
		            <li><a href="your/nice/url">HTML5</a></li>
		            <li><a href="your/nice/url">Javascript</a></li>
		            <li class="divider"></li>
		            <li><a href="your/nice/url">探索宇宙</a></li>
		          </ul>
		        </li>
		      </ul>
		    </div><!-- END .navbar-collapse -->
		  </div>
		</nav>
    </header>
    
  	<!-- 远程内容加载图标 -->
    <!-- <div class="text-muted loader loading"><i class="icon icon-spin icon-spinner-indicator"></i> 加载中...</div> -->

    <!-- 在此处编码你的创意 -->
    
	<div class="container-fluid" style="margin-top: 50px;">
	<div class="row">
		<div class="col-sm-2 col-lg-2">
			<nav class="menu" data-toggle="menu" style="width: 200px">
			  <button class="btn btn-primary"><i class="icon-edit"></i> CREATE</button>
			  <button class="btn"><i class="icon-cloud-upload"></i> UPLOAD</button>
			  <ul class="nav nav-primary">
			    <li><a href="javascript:;"><i class="icon-th"></i> Dashboard</a></li>
			    <li><a href="javascript:;"><i class="icon-user"></i> Me</a></li>
			    <li class="nav-parent">
			      <a href="javascript:;"><i class="icon-time"></i> Time</a>
			      <ul class="nav">
			        <li><a href="javascript:;">Today</a></li>
			        <li><a href="javascript:;">Tomarrow</a></li>
			        <li><a href="javascript:;">Yestorday</a></li>
			        <li><a href="javascript:;">This Week</a></li>
			      </ul>
			    </li>
			    <li><a href="javascript:;"><i class="icon-trash"></i> Trash</a></li>
			    <li><a href="javascript:;"><i class="icon-list-ul"></i> All</a></li>
			    <li class="active show nav-parent">
			      <a href="javascript:;"><i class="icon-tasks"></i> Status</a>
			      <ul class="nav">
			        <li><a href="javascript:;"><i class="icon-circle-blank"></i> Ready</a></li>
			        <li class="active"><a href="javascript:;"><i class="icon-play-sign"></i> Ongoing</a></li>
			        <li><a href="javascript:;"><i class="icon-ok-sign"></i> Completed</a></li>
			      </ul>
			    </li>
			  </ul>
			</nav>
		</div>
		<div class="col-lg-10 col-sm-10">
			<h1>面包屑</h1>
			<ol class="breadcrumb">
			  <li><a href="#">Home</a></li>
			  <li><a href="#">Library</a></li>
			  <li class="active">Data</li>
			</ol>
			
			<h1>普通数据加载</h1>
			<div id="gridContainer_2_1_1" class="dlshouwen-grid-container"></div>
			<div id="gridToolBarContainer_2_1_1" class="dlshouwen-grid-toolbar-container"></div>
		</div>
	</div>
		
	</div>
	
	<div id="back-to-top" class="back-to-top" title="回到顶部"><i class="fa fa-arrow-circle-up"></i></div>
	<div id="wechat"><img width="129" height="129" src="../Resources/plugins/grid/doc/images/wechat.jpg" /></div>
	
	<footer>
      <div class="container-fluid" style="margin-bottom: 0px;">
        <hr>
        <p class="text-center text-muted small">文档版本 <span class="doc-version"><i class="icon icon-spin icon-spinner-indicator"></i></span> &nbsp; 共 <span class="text-page-count"></span> 篇内容，<span class="text-external-count"></span> 个外链主题</p>
      </div>
    </footer>
    
    
     <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="../Resources/plugins/JQuery/jquery-1.11.0.min.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="../Resources/plugins/zui/js/zui.min.js"></script>
    <script src="../Resources/plugins/zui/lib/datatable/zui.datatable.min.js"></script>
    <!-- 分页组件 -->
    <script src="../Resources/plugins/page/js/jquery.page.js"></script>
    <!-- DLShouWen Grid -->
	<script type="text/javascript" src="../Resources/plugins/grid/dlshouwen.grid.min.js"></script>
	<script type="text/javascript" src="../Resources/plugins/grid/i18n/en.js"></script>
	<script type="text/javascript" src="../Resources/plugins/grid/i18n/zh-cn.js"></script>
	<script type="text/javascript" src="../Resources/plugins/grid/i18n/zh-tw.js"></script>
	
	<!-- datePicker -->
	<script type="text/javascript" src="../Resources/plugins/grid/dependents/datePicker/WdatePicker.js" defer="defer"></script>
	
	<!-- toTop 自动回到顶部插件 -->
	<!-- 
		<div id="back-to-top" class="back-to-top" title="回到顶部"><i class="fa fa-arrow-circle-up"></i></div>
	 -->
	<script type="text/javascript" src="../Resources/plugins/toTop/jquery.toTop.js"></script>
	
	<!-- syntaxHighLighter 代码高亮-->
	<!-- 
		//语法着色
		SyntaxHighlighter.config.clipboardSwf = '../../syntaxHighLighter/scripts/clipboard.swf';
		SyntaxHighlighter.config.strings.expandSource = '显示源代码';
		SyntaxHighlighter.config.strings.viewSource = '查看源代码';
		SyntaxHighlighter.config.strings.copyToClipboard = '复制到粘贴板';
		SyntaxHighlighter.config.strings.copyToClipboardConfirmation = '代码已经成功复制！';
		SyntaxHighlighter.config.strings.print = '打印';
		SyntaxHighlighter.all();
	 -->
	<script type="text/javascript" src="../Resources/plugins/syntaxHighLighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="../Resources/plugins/syntaxHighLighter/scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="../Resources/plugins/syntaxHighLighter/scripts/shBrushXml.js"></script>
	<script type="text/javascript" src="../Resources/plugins/syntaxHighLighter/scripts/shBrushJScript.js"></script>
	
	<!-- jquery pin -->
	<script type="text/javascript" src="../Resources/plugins/jquery.pin/jquery.pin.js"></script>
    
    <script type="text/javascript">
	  	//映射内容
		var sex = {1:'男', 2:'女'};
		var degree = {1:'小学', 2:'初中', 3:'高中', 4:'中专', 5:'大学', 6:'硕士', 7:'博士', 8:'其他'};
		//模拟数据（薪水在6000-12000之间，日期在1980-01-01 00::00:00到2014-10-01 00:00:00之间）
		var datas = new Array();
		for(var i=0; i<186; i++){
			var user = new Object();
			user.user_id = 'user_'+i;
			user.user_code = 'user_'+i;
			user.user_name = '模拟用户'+(Math.floor(Math.random()*1000)+10000)+'号';
			user.sex = (Math.floor(Math.random()*2)+1);
			user.salary = (Math.floor(Math.random()*6000)+6000);
			user.degree = (Math.floor(Math.random()*8)+1);
			user.time = new Date(Math.floor(Math.random()*1096588800000)+315504000000);
			user.time_stamp_s = Math.floor((Math.floor(Math.random()*1096588800000)+315504000000)/1000);
			user.time_stamp_ms = Math.floor(Math.random()*1096588800000)+315504000000;
			user.string_date = $.fn.dlshouwen.grid.tools.dateFormat(new Date(Math.floor(Math.random()*1096588800000)+315504000000), 'yyyy-MM-dd');
			user.string_time = $.fn.dlshouwen.grid.tools.dateFormat(new Date(Math.floor(Math.random()*1096588800000)+315504000000), 'yyyy-MM-dd hh:mm:ss');
			datas.push(user);
		}
    
    
    	var gridColumns_2_1_1 = [
   	 		{id:'user_code', title:'用户编号', type:'string', columnClass:'text-center'},
   	 		{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'},
   	 		{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center'},
   	 		{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center'}
   	 	];
   	 	var gridOption_2_1_1 = {
   	 		lang : 'zh-cn',
   	 		ajaxLoad : false,
   	 		exportFileName : '用户列表',
   	 		datas : datas,
   	 		columns : gridColumns_2_1_1,
   	 		gridContainer : 'gridContainer_2_1_1',
   			toolbarContainer : 'gridToolBarContainer_2_1_1',
   			tools : '',
   			pageSize : 10,
   			pageSizeLimit : [10, 20, 50]
   	 	};
   	 	var grid_2_1_1 = $.fn.dlshouwen.grid.init(gridOption_2_1_1);
   	 	$(function(){
   	 		grid_2_1_1.load();
   	 	});
    
    </script>
  </body>
</html>